<template>
  <div>
    <!--搜索区-->
    <div class='filter' ref='filterRef'>
      <slot name='filter'></slot>
    </div>

    <!-- 工具栏-->
    <div class='rowEE mb5' v-if='showToolbar'>
        <slot name='toolbar'></slot>
        <el-button  circle  :icon='Download' @click='exportExcel'></el-button>
    </div>

    <!-- 表格主体-->
    <el-table ref='tableRef' v-bind='$attrs' :data='tableData' :stripe='stripe' :border='border' :height='tableHeight'>
      <!-- 空数据插槽 -->
      <template #empty>
        <slot name='empty'>
          <el-empty description='暂无数据'></el-empty>
        </slot>
      </template>

      <!-- 页脚插槽 -->
      <template #append>
        <slot name='append'></slot>
      </template>

      <!-- 自定义列-->
      <slot name='column'>
        <el-table-column v-for='(item,index) in column' :key='index' v-bind='item'>
          <template #default='scope'>
            <slot :name="'cus_'+ item.prop" :scope='scope.row'>
              <span>{{ scope.row[item.prop] }}</span>
            </slot>
          </template>
        </el-table-column>
      </slot>
    </el-table>

    <!-- 分页-->
    <div v-show='pagination' class='mt20 flex-r'>
      <slot name='pagination'>
        <el-pagination
          v-model:currentPage='currentPage'
          v-model:page-size='pageSize'
          :total='total'
          :layout='layout'
          v-bind='$attrs'
          background
          @size-change='handleSizeChange'
          @current-change='handleCurrentChange'
        />
      </slot>
    </div>

    <!--导出对话框-->
    <ExportDialog ref='exportRef' v-bind='$attrs'/>

  </div>
</template>

<script>
export default {
  name: 'QTable'
}
</script>

<script setup>
import { Download} from '@element-plus/icons-vue'
import tableInit from './hook/table'
import prop from './hook/props'
import ExportDialog from './component/exportDialog.vue'
import { ref } from 'vue'

let exportRef = ref(null)
const tableRef = ref(null)
const filterRef = ref(null)
const exportExcel = () =>{
  exportRef.value.downLoadPop = true
}
let props = defineProps(prop)
let { tableData, currentPage, pageSize, total, handleSizeChange, handleCurrentChange, tableHeight } = tableInit(props,filterRef,tableRef)


</script>

<style scoped lang='scss'></style>
